<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>计费 / </span>
          <span>使用记录</span>
          <span>
            -
            统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。</span
          >
        </div>
      </template>
      <!-- 日期选择 -->
      <div class="demo-date-picker bg-fff">
        <div class="block">
          <span class="demonstration">Default</span>
          <el-date-picker
            v-model="value1"
            @change="time"
            start-placeholder="选择月"
          />
        </div>
        <el-row class="mb-4">
          <el-button type="primary">导出数据</el-button>
        </el-row>
      </div>
    </el-card>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        prop="date"
        label="序号"
        width="180"
      />
      <el-table-column align="center" prop="id" label="充值id" width="180" />
      <el-table-column
        align="center"
        prop="cTime"
        label="日期"
        :formatter="utils.fcTime"
      />
      <el-table-column align="center" prop="amount" label="充值金额" />
      <el-table-column align="center" prop="desc" label="备注" />
    </el-table>
    <div class="paging flex jc-c bg-fff">
      <div class="paging flex jc-c">
        <el-pagination
          :current-page="currPage"
          :page-sizes="pageSizes"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="page"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, inject,reactive } from "vue";
import * as api from "../../api/index.js";
const utils = inject("utils");
//日期

//格式化金钱
//
const form = reactive({});
const tableData = ref([]);
//分页
const currPage = ref(1); //当前界面数据
const pageSize = ref(10); //当前界面
const total = ref(1); //当前总分页条数(底部分页栏条数)

const usegeList = (date = "") => {
  let data = {
    currPage: currPage.value,
    total: total.value,
    pageSize: pageSize.value, //不传会使界面用默认的5条展示
    date: date,
  };
  api.$feeRechargeList(data).then((res) => {
    console.log(res);
    tableData.value = res.data;
    total.value = res.total;
  });
};

//切换分页
const page = (num) => {
  console.log(num);
  currPage.value = num;
  usegeList();
};
//时间输入框的input
const value1 = ref("");

const time = (times) => {
  currPage.value = 1;
  // page(1)
  //转换成时间戳
  console.log(times, 11111);
  let aa = new Date(times);
  let dateStr = aa.getFullYear() + "-" + (aa.getMonth() + 1);
  console.log(dateStr, "aa");

  usegeList(dateStr);
};
onMounted(() => {
  usegeList();
});
</script>





<style scoped>
/* 日期选择 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
}
.demo-date-picker .block {
  padding: 30px 0;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.box-card {
  width: 99%;
}
</style>
